<template>
	<view class="site-acquisition" :style="{height: wHeight + 'px'}">
		<view class="custom-search">
			<view class="area">
				<button type="default">{{ area }}</button>
			</view>
			<view class="input-model">
				<image src="/static/images/search.png" mode=""></image>
				<input type="text" v-model="searchValue" placeholder="请输入搜索的内容" @click="clickInput" />
			</view>
			<view class="search-button">
				<button type="default" @click="searchApi">搜索</button>
			</view>
		</view>
		<view class="">
			
			<web-view :src="url" style="height: 100%;margin-top: 50px;"></web-view>
		</view>
		<!-- 搜索页面 -->
		<wyb-popup class="mark" ref="popup" type="center"  radius="6" :showCloseIcon="true">
		    <view class="popup-content">
		        更新中, 请稍后...
		    </view>
		</wyb-popup>
	</view>
	
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		name: 'siteAcquisition',
		data() {
			return {
				// https://m.dianping.com/
				wHeight: '',
				url: 'https://mind.1688.com/wap/wapsy/dke4eosa0/index.html?pageId=1150842&cms_id=1150842?src=desktop',
				area: '', //地区 
				passParameter: {}, //传递的参数
				searchValue: '',  //搜索内容
				
			}
		},
		components:{
			wybPopup
		},
		onLoad(e) {
			this.wHeight = this.$store.state.ContentHeight-45;
			this.area = this.$store.state.region;
			// let obj = JSON.parse(e.obj);
			this.passParameter = JSON.parse(e.obj);
			this.url = this.passParameter.indexWeb;
			this.$store.commit('setwebIframSearch', '');
			this.searchValue = this.$store.state.webIframSearch;
		},
		onShow() {
			//将搜索的参数显示在搜索的位置
			this.searchValue = this.$store.state.webIframSearch;
			if(this.searchValue) {
				this.searchApi();
			}
			
		},
		methods: {
			clickInput() {
				uni.navigateTo({
					url: './searchImport',
				
				})
			},
			//带着搜索的参数 搜索
			searchApi() {
				if(this.url) {
					switch(this.passParameter.id) {
						case 6://企业黄页
							this.url = `https://m.huangye88.com/s?kw=${this.searchValue}&type=sale`;
							break;
						 case 7: //阿里巴巴采购网
							this.url = `https://m.1688.com/offer_search/-6D7033.html?keywords=${this.searchValue}`;
							break;
						case 8: //列表网
							this.url = `http://m.liebiao.com/jinan`;
							break;
						case 10:  //大众点评
							this.url = `https://m.dianping.com/shoplist/22/search?from=m_search&keyword=${this.searchValue}`;
							break;
						case 12:  //亿商网
							this.url = `http://m.eb80.com/gongying______________${this.searchValue}_1.html`;
							break;
					} 
						
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.site-acquisition{
		.custom-search{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #eeeeee;
			padding: 0 20rpx;
			box-sizing: border-box;
			.area{
				button{
					width: 150rpx;
					height: 60rpx;
					line-height: 60rpx;
					background-color: #f9b80a;
					color: #ffffff;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;
				}
			}
			.input-model{
				background: #ffffff;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				padding: 14rpx 15rpx;
				margin: 0 30rpx;
				flex: 1;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				input{
					color: #666666;
					font-size: 24rpx;
					
				}
			}
			.search-button{
				width: 140rpx;
				border-radius: 8rpx;
				button {
					width: 100%;
					border-radius: 8rpx;
					font-size: 28rpx;
					background: #11C3ED;
					border-radius: 5rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #ffffff;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			
		}
		.mark{
			width: 100%;
			height: 100%;
			.wyb-popup-box{
				width: 100%;
				height: 100%;
			}
		}
		
	}
</style>
